<template>
  <div id="app" style="height: 100%">
    <a-layout class="ant-layout">
      <a-layout-sider v-if="level" class="aa" style="background: #f0f2f5">
        <Step></Step>
      </a-layout-sider>
      <a-layout-content class="ant-layout-content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import Step from "@/commonent/step";

export default {
  components: { Step },
  data() {
    return {
      router: useRouter(),
    };
  },
  computed: {
    level: function () {
      const test = this.router.currentRoute.path.split("/", 2);
      const tt = test[1];
      switch (tt) {
        case "test":
          return 1;
        case "test1":
          return 2;
        case "test2":
          return 3;
        case "test3":
          return 4;
        case "R":
          return 6;
        default:
          return null;
      }
    },
  },
};
</script>

<style>
#root,
body,
html {
  height: 100%;
}

.aa {
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ant-layout {
  /*background-color: rgb(39, 79, 109);*/
  display: flex !important;
  width: 100% !important;
  min-height: 100% !important;
}

.ant-layout-content {
  width: calc(100% - 200px) !important;
}
</style>
